<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>创建一个简单的动画</title>
    <style type="text/css">
        #d1{
            width:200px;
            height:200px;
            background-color:red ;
            position: relative;
            animation: ff 5s;
            animation-iteration-count: infinite;
        }
        @keyframes ff{
            0%{background-color: #FF0000;left:0px; top:10px;transform: rotate(30grad);}
            25%{background-color: darkcyan;left:200px; top:10px;}
            50%{background-color: aqua;left:200px; top:210px;}
            75%{background-color:green ;left:0px; top:210px;}
            100%{background-color: #FF0000;left:0px; top:10px;}
        }
    </style>
</head>
<body>
<div id="d1">

</div>
</body>
</html>